<template>
	<view class="container">
		<uni-search-bar @confirm="handleSearch" v-model="searchText" @cancel="refresh" @clear="refresh" />
		<view v-if="!showSearch">
			<!-- 近期消息 -->
			<view class="title">近期消息</view>
			<uni-list :border="true" v-if="useUserStore.notices&&useUserStore.notices.length!==0">
				<uni-list-chat v-for="(item,index) in useUserStore.notices" :key="index" :avatarCircle="true"
					:avatar="item.avatarURL" :note="item.username" :title="item.title" :clickable="true"
					@click="handleClick(item)" :time="item.createTime">
				</uni-list-chat>
			</uni-list>
			<view v-else class="no-more">暂时没有新消息</view>
			<!-- 历史消息 -->
			<view class="title">历史消息</view>
			<uni-list :border="true" v-if="historyNotices&&historyNotices.length!==0">
				<uni-list-chat v-for="(item,index) in historyNotices" :key="index" :avatarCircle="true"
					:avatar="item.avatarURL" :note="item.username" :title="item.title" :clickable="true"
					@click="handleClick(item)" :time="item.createTime">
				</uni-list-chat>
			</uni-list>
			<view v-else class="no-more">暂时没有历史消息</view>
			<uni-load-more v-if="!noMore"></uni-load-more>
			<view class="no-more" v-else>没有更多啦……</view>
		</view>
		<!-- 搜索结果 -->
		<view v-else>
			<view class="title">共搜到{{searchCount}}条与“{{confirmSearchText}}”相关的内容</view>
			<uni-list :border="true">
				<uni-list-chat v-for="(item,index) in searchResult" :key="index" :avatarCircle="true"
					:avatar="item.avatarURL" :note="item.username" :title="item.title" :clickable="true"
					@click="handleClick(item)" :time="item.createTime">
				</uni-list-chat>
			</uni-list>
		</view>
	</view>
	<Loading />
</template>

<script setup>
	import {
		userStore
	} from "@/store/user.js";
	import {
		GetHistoryNoticesList,
		SearchNoticeByTitle
	} from "@/apis/notice.js";
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref,
		onMounted,
		watch
	} from "vue";
	import Loading from "@/components/Loading.vue";

	const useUserStore = userStore();
	const page = ref(1);
	const limit = ref(10);
	const historyNotices = ref([]);
	const noMore = ref(false);
	const showSearch = ref(false);
	const searchText = ref("");
	const confirmSearchText = ref("");
	const searchResult = ref(null);
	const searchCount = ref(0);

	function handleClick(e) {
		uni.navigateTo({
			url: `/pages/message/detail/detail?detail=${JSON.stringify(e)}`
		})
	}

	function handleSearch() {
		showSearch.value = true;
		SearchNoticeByTitle({
			keyword: searchText.value
		}).then(res => {
			confirmSearchText.value = searchText.value;
			searchCount.value = res.count;
			searchResult.value = res.data;
		})
	}

	onReachBottom(() => {
		if (!noMore.value)
			getMoreList();
	})

	onPullDownRefresh(async () => {
		await refresh();
		await uni.stopPullDownRefresh();
	})

	function refresh() {
		searchText.value = confirmSearchText.value = "";
		searchResult.value = null;
		showSearch.value = false;
		getMoreList();
	}

	function getMoreList() {
		noMore.value = false;
		GetHistoryNoticesList({
			page: page.value,
			limit: limit.value
		}).then(res => {
			// console.log(res.data);
			if (res.data === null) {
				noMore.value = true;
				return;
			}
			let newlist = res.data;
			historyNotices.value = historyNotices.value.concat(newlist);
			page.value++;
		});
	}

	onMounted(() => {
		refresh();
	})
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx 0;

		.title {
			font-size: 30rpx;
			color: #000;
			padding: 20rpx;
		}

		.no-more {
			text-align: center;
			font-size: 24rpx;
			margin-top: 20rpx;
			color: #666;
		}
	}
</style>
